<template>
  <!-- 编写html内容 -->
  <div>
    <nav-header @add="addTodo"></nav-header>
    <nav-main :list='list' @del='del'></nav-main>
    <nav-footer :list='list' @clear='clear'></nav-footer>
    <div @click="clickNum(100)">{{num}}</div>
    <div @click="clickNum1">{{num1}}</div>
    <div>{{name}}</div>
    <div>{{arr.slice(1,4)}}</div>
    <div>{{obj}}</div>
    <!-- <div>{{data.num}}</div>
    <div>{{data.name}}</div>
    <div>{{data.arr.slice(1,4)}}</div>
    <div>{{data.obj}}</div> -->
    <div>两个数之和: {{addNum}}</div>
    <div><button @click="add">add</button></div>
    <div>{{list}}</div>
    <button @click="goto">跳转路由</button>
    <div>{{num}}-{{name}}-{{obj}}</div>
  </div>
</template>

<script>
// 编写js内容的
import NavHeader from '@/components/navHeader/NavHeader'
import NavMain from '@/components/navMain/NavMain'
import NavFooter from '@/components/navFooter/NavFooter'
import {defineComponent, ref, reactive, toRefs, computed, onMounted, onUnmounted} from 'vue'
import {useStore} from 'vuex'
import {useRouter, useRoute} from 'vue-router'

export default defineComponent ({
  name: 'Home', // 组件名称
  // 接收父组件的数据
  props: {

  },
  // 定义子组件
  components: {
    NavHeader,
    NavMain,
    NavFooter
  },
  setup(props, ctx){
    // 组件创建过程
    console.log(111)

    // let num = ref(10)
    // let name = ref('madison')
    // let arr = ref(['a','b','c','d'])
    // let obj = ref({
    //   age: 20
    // })
    let num1 = ref(20)
    let data = reactive({
      num: 10,
      name: 'madison',
      arr: ['a','b','c','d'],
      obj: {age: 20}
    })
    let clickNum = (value)=>{
      console.log(value)
      console.log('点击了num:', data.num)
    }
    let clickNum1 = (value)=>{
      // 访问ref定义的数据 要写数据名.value
      console.log('点击了num1:',num1.value)
    }
    let addNum = computed(()=>{
      // 必须返回一个值
      // 逻辑代码
      // 购物车总价
      return num1.value + data.num
    })
    let add = ()=>{
      num1.value++
      data.num++
    }

    // router 是全局路由对象
    let router = useRouter()
    console.log(router)
    let goto = () => {
      // 跳转路由
      // push 函数里面可以传入跳转的路径
      // router.push('/about')
      // back: 回退到上一页
      // forward: 去到下一页
      // go(整数) 整数代表前进 复数代表后退
      router.push({
        path: '/about'
      })
    }
    // route 是当前路由对象
    // query 传递过来的参数都是字符串类型
    let route = useRoute()
    console.log(route)
    console.log(route.params.num)
    console.log(route.params)


    let num = ref(null)
    let name = ref('')
    let obj = ref({})
    onMounted(()=>{
        // 组件挂载的过程
        // 数据 dom...
        console.log('onMounted')
        num.value = route.params.num * 1
        name.value = route.params.name
        obj.value = JSON.parse(route.params.obj)
    })
    onUnmounted(()=>{
      console.log('onUnmounted')
    })


    let store = useStore()
    console.log(store)
    let list = computed(()=>{
      return store.state.list
    })
    //添加任务
    let value = ref('')
    let addTodo = (val)=>{
      value.value = val
      // 先判断有没有存在的任务 如果任务存在 不能重复添加
      let flag = true
      list.value.map(item=>{
        if (item.title === value.value){
          // 有重复的任务
          flag = false
          alert('任务已存在')
        }
      })
      console.log(val)
      if(flag){
        // 调用mutation
        store.commit('addTodo',{
          title: value.value,
          complete: false
        })
      }
    }

    //删除任务
    let del = (val)=>{
      console.log(val)
      store.commit('delTodo', val)
    }

    // 清除已完成
    let clear  = (val)=>{
      store.commit('clear', val)
    }

    return {
      // num,
      // name,
      // arr,
      // obj
      // data,
      ...toRefs(data),
      num1,
      clickNum,
      clickNum1,
      addNum,
      add,
      list,
      goto,
      num,
      name,
      obj,
      value,
      addTodo,
      del,
      clear
    }
  }
})
</script>

<style scoped lang="scss">

</style>